<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>直播打卡</div>
        -->
        <div class="hei10"></div>

        <div class="t_table_box">
          <div
            style="background-color: #F6F9FC;color:rgb(100, 112, 118); padding: 10px 20px; font-size: 14px;margin-bottom:20px; border-radius: 10px;"
          >
            直播统计可以帮助您便捷的统计主播绩效，且可以实时显示主播当前直播销售情况
            <el-button @click="downDate" type="text" style="margin-left:30px;">
              <i class="el-icon-download"></i>点击这里下载使用说明
            </el-button>
          </div>
          <div class="kflexbc">
            <div
              @click="daka"
              class="kflexcc"
              style="width: 140px; color: #fff; font-size: 20px; height: 56px; cursor: pointer; background: url('https://file.storep.91haoka.cn/gantanhao/an1.png') no-repeat; background-size: cover;"
            >直播打卡</div>
            <div
              @click="tozbgl"
              class="kflexcc"
              style="width: 140px; color: #fff; font-size: 20px; height: 56px; cursor: pointer; background: url('https://file.storep.91haoka.cn/gantanhao/an1.png') no-repeat; background-size: cover;"
            >主播管理</div>
          </div>

          <div
            class="kflexbc"
            style="margin-top: 85px; margin-bottom: 20px;justify-content: start;"     
          >
            <div
              v-for="(item,index) in zhanduiarr"
              :key="index"
              class="kflexbc t_zdbox"
              :class="[index==0?'t_border_one':index==1?'t_border_two':'t_border_three']"
            >
              <div
                style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"
              >
                <img
                  v-if="index==0"
                  src="https://file.storep.91haoka.cn/gantanhao/wi1.png"
                  style="width: 130px;"
                />
                <img
                  v-if="index==1"
                  src="https://file.storep.91haoka.cn/gantanhao/wi2.png"
                  style="width: 130px;"
                />
                <img
                  v-if="index==2"
                  src="https://file.storep.91haoka.cn/gantanhao/wi3.png"
                  style="width: 130px;"
                />
              </div>
              <div class="kflexc">
                <div>
                  <img :src="item.img" style="width: 100px; height: 100px;" />
                </div>
                <div style="font-size: 36px; margin-left: 20px;">{{item.name}}</div>
              </div>
              <div style="font-size: 36px;">{{item.value}}</div>
            </div>

            <!-- <div style="border: 10px rgb(223, 232, 233) solid;  border-radius: 20px; padding: 20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi2.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui1.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui1.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui1.value}}</div>
            </div>

            <div  style="border: 10px rgb(249, 212, 104) solid;  border-radius: 20px; padding:  20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi1.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui2.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui2.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui2.value}}</div>
            </div>

            <div style="border: 10px rgb(248, 204, 156) solid;  border-radius: 20px; padding:  20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi3.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui0.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui0.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui0.value}}</div>
            </div>-->
          </div>
          <div
            :style="`border-radius:20px;background: url('https://file.storep.91haoka.cn/gantanhao/an2.png') no-repeat; background-size: cover; color: #fff; padding-right: 40px; margin-top: 40px; font-size: 20px; margin-bottom: 20px;height: ${geren.live_rooms&&geren.live_rooms.length===2?'230px':'140px'}`"
            class="kflexbc"
          >
            <div
              v-if="geren.live_rooms&&geren.live_rooms.length===1"
              style="display: flex;align-items: center;width: 100%;"
            >
              <div class="kflexc" style="flex: 1;">
                <div
                  style="font-size: 36px; padding: 0 30px; border-right: 1px #fff solid;"
                >{{geren.streamer_name?geren.streamer_name:'---'}}</div>
                <div
                  v-for="item in geren.live_rooms"
                  :key="item"
                  style="display: flex;align-items: center;"
                >
                  <div style="margin-left: 40px;display: flex;align-items: center;">
                    <img src="https://file.storep.91haoka.cn/gantanhao/tu.png" style="width: 20px;" />
                    <div style="margin-left: 10px;">{{item.mingci?item.mingci:'--'}}</div>
                  </div>

                  <div style="margin-left: 60px;display: flex;align-items: center;">
                    <img
                      src="https://file.storep.91haoka.cn/gantanhao/tu1.png"
                      style="height: 20px;"
                    />
                    <div
                      style="margin-left: 10px;font-size:18px"
                    >{{item.live_platform?item.live_platform:'--'}}</div>
                  </div>
                  <!-- <div style="margin-left: 10px;">{{item.live_room?item.live_room:'--'}}</div> -->
                  <div style="margin-left: 60px;display: flex;align-items: center;">
                    <img
                      src="https://file.storep.91haoka.cn/gantanhao/tu2.png"
                      style="width: 20px;"
                    />
                    <div
                      style="margin-left: 10px; padding-right: 60px;  border-right: 1px #fff solid; line-height: 41px;"
                    >{{item.live_title?item.live_title:'--'}}</div>
                  </div>
                  <div style="margin-left: 80px;">
                    <div style="font-size: 16px; margin-bottom: 10px;">销量</div>
                    <div style="font-size: 36px;">{{item.sales_total?item.sales_total:'--'}}</div>
                  </div>
                  <div style="margin-left: 80px;">
                    <div style="font-size: 16px; margin-bottom: 10px;">真实</div>
                    <div
                      style="font-size: 36px;"
                      v-if="item.sales_total != '--'"
                    >{{item.sales_real_total?item.sales_real_total:'--'}}</div>
                    <!-- <div style="font-size: 36px;" v-if="item.sales_total == '--'">--</div> -->
                  </div>
                  <div style="margin-left: 80px;">
                    <div style="font-size: 16px; margin-bottom: 10px;">引流</div>
                    <div
                      style="font-size: 36px;"
                    >{{item.sales_traffic_total?item.sales_traffic_total:'--'}}</div>
                  </div>
                </div>
              </div>

              <div class="kflexc">
                <div
                  @click="handleEdit('xiabo')"
                  v-if="geren.streamer_id"
                  class="kflexcc"
                  style="width: 140px; cursor: pointer; margin-left: 80px; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an4.png') no-repeat; background-size: cover;"
                >下播</div>
                <div
                  @click="handleEdit('xubo')"
                  v-if="geren.streamer_id"
                  class="kflexcc"
                  style="width: 140px; cursor: pointer; margin-left: 30px; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an3.png') no-repeat; background-size: cover;"
                >换人续播</div>
              </div>
            </div>
            <div
              v-if="geren.live_rooms&&geren.live_rooms.length>1"
              style="display: flex;align-items: center;width: 100%;"
            >
              <div style="display: flex;flex:1; align-items: center;">
                <div
                  style="font-size: 36px; padding: 0 30px"
                >{{geren.streamer_name?geren.streamer_name:''}}</div>
                <div
                  v-for="(item,index) in geren.live_rooms"
                  :key="item"
                  :style="`flex: 1;border-right:${index==0?'1px solid rgb(255, 255, 255)':'none'} `"
                >
                  <div style="display: flex;align-items: center">
                    <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                      <img
                        src="https://file.storep.91haoka.cn/gantanhao/tu.png"
                        style="width: 20px;"
                      />
                      <span style="margin-left: 10px;">{{item.mingci?item.mingci:"--"}}</span>
                    </div>
                    <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                      <img
                        src="https://file.storep.91haoka.cn/gantanhao/tu1.png"
                        style="width: 20px;"
                      />
                      <span
                        style="margin-left: 10px;font-size:18px"
                      >{{item.live_platform?item.live_platform:'--'}}</span>
                    </div>
                    <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                      <img
                        src="https://file.storep.91haoka.cn/gantanhao/tu2.png"
                        style="width: 20px;"
                      />
                      <span style="margin-left: 10px;">{{item.live_title?item.live_title:'--'}}</span>
                    </div>
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 40px;">
                    <div
                      style="flex:1;display: flex;align-items: center;justify-content: center;flex-direction: column;"
                    >
                      <div style="font-size: 16px; margin-bottom: 10px;">销量</div>
                      <div style="font-size: 36px;">{{item.sales_total?item.sales_total:'--'}}</div>
                    </div>
                    <div
                      style="flex:1;display: flex;align-items: center;justify-content: center;flex-direction: column;"
                    >
                      <div style="font-size: 16px; margin-bottom: 10px;">真实</div>
                      <div
                        style="font-size: 36px;"
                        v-if="item.sales_total != '--'"
                      >{{item.sales_real_total?item.sales_real_total:'--'}}</div>
                      <div style="font-size: 36px;" v-if="item.sales_total == '--'">--</div>
                    </div>
                    <div
                      style="flex:1;display: flex;align-items: center;justify-content: center;flex-direction: column;"
                    >
                      <div style="font-size: 16px; margin-bottom: 10px;">引流</div>
                      <div
                        style="font-size: 36px;"
                      >{{item.sales_traffic_total?item.sales_traffic_total:'--'}}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                style="margin-left: 100px;display: flex;justify-content: center;flex-direction: column;align-items: center;gap: 30px"
              >
                <div
                  @click="handleEdit('xiabo')"
                  v-if="geren.streamer_id"
                  class="kflexcc"
                  style="width: 140px; cursor: pointer; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an4.png') no-repeat; background-size: cover;"
                >下播</div>
                <div
                  @click="handleEdit('xubo')"
                  v-if="geren.streamer_id"
                  class="kflexcc"
                  style="width: 140px; cursor: pointer; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an3.png') no-repeat; background-size: cover;"
                >换人续播</div>
              </div>
            </div>
          </div>

          <div
            style=" margin-bottom: 20px;"
            class="kflexc se"
          >
            <div
              class="kflexc"
              style="background: rgb(246, 249, 252); width: 330px; margin-right: 20px;  border-radius: 10px;"
            >
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队划分</div>
              <el-select
                v-model="huafen"
                @change="suansuan"
                style="width: 250px;"
                placeholder="请选择战队划分方式"
              >
                <el-option label="按人划分" :value="1"></el-option>
                <el-option label="按直播间划分" :value="2"></el-option>
              </el-select>
            </div>

            <div style="background: rgb(246, 249, 252); border-radius: 10px;" class="kflexc">
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队</div>
              <el-select v-model="zhandui" clearable @change="gettableData2" placeholder="请选择战队">
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in zhanduilist"
                  :key="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- <div style="position:relative; width: 1677px;" v-if="shop_id == 50481 || shop_id == 304676">
            <div style="position: absolute; left: 10px; top: 0; padding: 8px;"> <img
                src="https://file.storep.91haoka.cn/gantanhao/pk3.png"
                style="width: 78px; height: 78px; display: block; border: 4px #fff solid; border-radius: 10px;"></div>
            <div
              style="position: absolute; left: 160px; top: 0; height: 102px; line-height: 102px;  color: rgb(255, 255, 255); font-size: 48px; font-weight: bold;"
              class="kflexc">贾杨战队</div>
            <img src="https://file.storep.91haoka.cn/gantanhao/pk1.png">
            <div
              style="position: absolute; right: 160px; top: 0; height: 102px; line-height: 102px;  color: rgb(255, 255, 255); font-size: 48px; font-weight: bold;"
              class="kflexc">邵尉战队</div>
            <div style="position: absolute; right: 10px; top: 0; padding: 8px;"> <img
                src="https://file.storep.91haoka.cn/gantanhao/pk4.png"
                style="width: 78px; height: 78px;  display: block; border: 4px #fff solid; border-radius: 10px;"></div>
          </div>-->

          <!--          <div
            style="position:relative; height: 36px; background: rgb(90, 54, 255); border-radius: 10px; margin: 15px 0;  width: 1677px; overflow: hidden;"
            v-if="shop_id == 50481 || shop_id == 304676">
            <div
              style="background: rgb(245, 28, 100);  font-weight: bold; box-sizing: border-box; position: absolute; border-radius: 10px; left: 0; top: 0; height: 36px; line-height: 36px; text-align: left; color: #fff; padding-left: 20px; overflow: hidden; "
              :style="{width:ssw}">
              贾杨战队总销量<span style="margin:0 20px;">{{d1}}单</span>（{{lingxianluohou}}）</div>
            <img src="https://file.storep.91haoka.cn/gantanhao/pk2.png"
              style="position: absolute; left: 50%; bottom: 0; margin-left: -30px;">
            <div
              style="text-align: right; padding-right: 20px; height: 36px; line-height: 36px; color: #fff; position: absolute; top: 0; right: 0px; font-weight: bold;">
              <span style="margin-right: 20px;">{{d2}}单</span>邵尉战队总销量</div>
          </div>-->
          <!-- <div class="kflexc se" style="margin-bottom: 20px;" v-if="shop_id == 50481 || shop_id == 304676">
            <div style="background: rgb(246, 249, 252);" class="kflexc">
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队</div>
              <el-select v-model="zhandui" clearable @change="gettableData2" placeholder="请选择战队">
                <el-option label="贾杨战队" value="1"></el-option>
                <el-option label="邵尉战队" value="2"></el-option>
                <el-option label="JJS战队" value="3"></el-option>
              </el-select>
            </div>
          </div>-->
          <!-- <div style="display: flex;justify-content: space-between;">
            <el-button @click="daka" style="margin-bottom: 20px;" type="danger">直播打卡</el-button>
            <el-button @click="tozbgl" style="margin-bottom: 20px;" type="danger">主播管理</el-button>
          </div>-->
          <el-table
            :header-cell-style="{
                        background:'#F4F4F4',
                        color:'#7D8087'}"
            :data="tableData2"
            @sort-change="sortchange"
            stripe
            style="width: 100%; margin-top: 20px;"
          >
            <el-table-column label="排名" center>
              <template slot-scope="scope">
                <div
                  v-if="scope.$index != 0 && scope.$index != 1 && scope.$index != 2 "
                >{{scope.$index+1}}</div>
                <div v-if="scope.$index == 0">
                  <img src="https://file.storep.91haoka.cn/gantanhao/di1.png" style="width: 35px;" />
                </div>
                <div v-if="scope.$index == 1">
                  <img src="https://file.storep.91haoka.cn/gantanhao/di2.png" style="width: 35px;" />
                </div>
                <div v-if="scope.$index == 2">
                  <img src="https://file.storep.91haoka.cn/gantanhao/di3.png" style="width: 35px;" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="streamer_name" label="直播中"></el-table-column>
            <el-table-column
              prop="team_name"
              label="所属战队"
            ></el-table-column>
            <el-table-column prop="live_platform" label="直播类型"></el-table-column>
            <el-table-column prop="live_title" label="直播标题"></el-table-column>
            <el-table-column width="200px" prop="created_at" label="开播时间"></el-table-column>
            <el-table-column label="直播时长">
              <template slot-scope="scope">{{scope.row.formatted_time}}</template>
            </el-table-column>
            <el-table-column sortable prop="sales_total" label="销量"></el-table-column>
            <el-table-column sortable prop="sales_hourly" label="每小时销量"></el-table-column>
            <el-table-column
              sortable
              prop="sales_real_total"
              v-if="this.shop_id == 50481 || this.shop_id == 304676"
              label="真实"
            ></el-table-column>
            <el-table-column
              sortable
              prop="sales_traffic_total"
              v-if="this.shop_id == 50481 || this.shop_id == 304676"
              label="引流"
            ></el-table-column>
            <!-- <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  v-if="shop_id != 304676"
                  @click="handleEdit( scope.row.id)"
                >下播</el-button>
                <el-button
                  size="mini"
                  type="text"
                  v-if="shop_id != 304676"
                  @click="replace(scope.row)"
                >换人续播</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
    <!-- 打开弹窗单 -->
    <el-dialog title="直播打卡" :visible.sync="dakashow" width="340px" style="border-radius: 20px">
      <div>
        <div>
          <el-select
            v-model="choosezb"
            value-key="id"
            style="width: 300px;"
            class="t_select_box"
            placeholder="请选择主播"
          >
            <el-option
              v-for="(item,index) in zblistdata"
              :key="index"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            @change="nowtype"
            :disabled="isreplace"
            v-model="choosezbtype"
            class="t_select_box"
            style="margin-top: 20px;margin-bottom:20px;width: 300px; "
            value-key="label"
            placeholder="请选择直播类型"
          >
            <el-option
              v-for="(item,index) in zbtypedata"
              :key="index"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            :disabled="isreplace"
            v-model="choosezbtitle"
            style="width: 300px;"
            class="t_select_box"
            value-key="label"
            placeholder="请选择销售页名称或店铺名"
          >
            <el-option
              v-for="(item,index) in zbtitledata"
              :key="index"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
          <div class="btn_broadcast">
            <el-button type="text" style="color:#4C25F9" @click="changeHandle">切换双播</el-button>
            <router-link to="/addliucheng">
              <el-button type="text">没有找到直播间？</el-button>
            </router-link>
          </div>
          <img
            src="https://file.storep.91haoka.cn/gantanhao/zhibo1.png"
            @click="startzb(1)"
            style="width: 300px; cursor: pointer;margin-top: 20px;"
          />
        </div>
        <!-- <div @click="startzb" class="t_daka_btn">
          开始直播
        </div>-->
      </div>
    </el-dialog>
    <!-- 双播弹窗 -->
    <el-dialog
      title="直播打卡双播"
      :visible.sync="twinPersonModal"
      style="border-radius: 20px"
      width="700px"
      :close-on-click-modal="false"
    >
      <div>
        <el-select
          v-model="choosezb"
          value-key="id"
          style="width: 300px;"
          class="t_select_box"
          placeholder="请选择主播"
        >
          <el-option
            v-for="(item,index) in zblistdata"
            :key="index"
            :label="item.name"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      <div class="live_room">
        <div>
          <div class="room_one">直播间1</div>
          <el-select
            :disabled="isreplace"
            v-model="zhibojian1.choosezbtype"
            class="t_select_box"
            style="width: 300px;"
            value-key="label"
            placeholder="请选择直播类型"
          >
            <el-option
              v-for="item in zbtypedata"
              :key="item"
              :label="item.label"
              :value="item"
              :disabled="item.value==zhibojian2.choosezbtype.value"
            ></el-option>
          </el-select>
          <el-select
            :disabled="isreplace"
            v-model="zhibojian1.choosezbtitle"
            style="width: 300px;margin:10px 0"
            value-key="label"
            placeholder="请选择销售页名称或店铺名"
          >
            <el-option
              v-for="item in zhibojian1.zbtitledata"
              :key="item"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <div>
          <div class="room_two">直播间2</div>
          <el-select
            :disabled="isreplace"
            v-model="zhibojian2.choosezbtype"
            style="width: 300px;"
            value-key="label"
            placeholder="请选择直播类型"
          >
            <el-option
              v-for="item in zbtypedata"
              :key="item"
              :label="item.label"
              :value="item"
              :disabled="item.value==zhibojian1.choosezbtype.value"
            ></el-option>
          </el-select>
          <el-select
            :disabled="isreplace"
            v-model="zhibojian2.choosezbtitle"
            style="width: 300px;margin:10px 0"
            class="t_select_box"
            value-key="label"
            placeholder="请选择销售页名称或店铺名"
          >
            <el-option
              v-for="item in zhibojian2.zbtitledata"
              :key="item"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="word_mark">
        <div style="color:#4C25F9" @click="switchHandle">切换单播</div>
        <router-link to="/addliucheng">
          <el-button type="text">没有找到直播间？</el-button>
        </router-link>
      </div>
      <div class="start_live" @click="startzb(2)">
        <img
          src="https://file.storep.91haoka.cn/test-img/1734940883890.png"
          alt
          style="width:100%;"
        />
      </div>
      <!-- <img
        @click="startzb(2)"
        src="https://file.storep.91haoka.cn/gantanhao/zhibo1.png"
        class="start_live"
      />-->
    </el-dialog>
    <!-- 单人双播下播 续播 弹窗 -->
    <el-dialog :title="editType=='xubo'?'换人续播':'下播确认'" :visible.sync="leaveModal" width="20%" style="border-radius: 20px">
      <el-select
        v-if="editType=='xubo'"
        v-model="streamer_id"
        value-key="id"
        style="width: 340px;"
        class="t_select_box"
        placeholder="请选择主播"
      >
        <el-option
          v-for="(item,index) in zblistdata"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <div class="select_room">{{editType=='xiabo'?'请选择要下播的直播间':'续播直播间'}}</div>
      <div class="checkbox_room">
        <el-checkbox-group v-model="live_record_ids">
          <el-checkbox
            v-for="(item) in geren.live_rooms"
            :label="item.id"
            :key="item.id"
          >{{item.live_title}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="prompt_text" v-show="editType=='xiabo'?'':'续播直播间'">注：不续播的直播间将会直接下播</div>
      <img
        v-if="editType=='xiabo'"
        @click="leaveHandle"
        class="leave_btn"
        src="https://file.storep.91haoka.cn/test-img/1734844865162.png"
        alt
      />
      <img
        v-else
        @click="xubodanHandle"
        class="leave_btn"
        src="https://file.storep.91haoka.cn/test-img/1734850130663.png"
        alt
      />
    </el-dialog>
    <!-- 单人单播下播 续播 弹窗 -->
    <el-dialog :title="editType=='xubo'?'换人续播':'下播确认'" :visible.sync="lowerModal" width="20%" style="border-radius: 20px">
      <div class="confim_text" v-if="editType=='xiabo'">确认下播么？</div>
      <el-select
        v-if="editType=='xubo'"
        v-model="streamer_id"
        value-key="id"
        style="width: 340px;"
        class="t_select_box"
        placeholder="请选择主播"
      >
        <el-option
          v-for="(item,index) in zblistdata"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <img
        v-if="editType=='xiabo'"
        @click="leaveHandle"
        class="leave_btn"
        src="https://file.storep.91haoka.cn/test-img/1734844865162.png"
        alt
      />
      <img
        v-else
        @click="xubodanHandle"
        class="leave_btn"
        src="https://file.storep.91haoka.cn/test-img/1734850130663.png"
        alt
      />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import top from "@/components/top.vue";
import left from "@/components/left.vue";
import foot from "@/components/foot.vue";
import moment from "moment";

export default {
  components: {
    left: left,
    top: top,
    foot: foot
  },
  name: "zhibodaka",
  data() {
    return {
      streamer_id: "",
      editType: "xiabo",
      live_record_ids: [],
      lowerModal: false,
      leaveModal: false,
      twinPersonModal: false,
      tableData: [],
      dakashow: false,
      zblistdata: [],
      choosezb: "",
      zbtypedata: [],
      choosezbtype: "",
      zbtitledata: [],
      choosezbtitle: "",
      xunhuan: "",
      isreplace: false,
      replaceid: "",
      ws: null,
      shop_id: "",
      ssw: "300px",
      zhanduilist: [],
      zhandui: "",
      d1: 0,
      d2: 0,
      d3: 0,
      lingxianluohou: "",
      huafen: 1,
      jisuandeshuju: [],
      jisuandeshuju2: [],
      geren: {},
      zhandui0: {},
      zhandui1: {},
      zhandui2: {},
      zhanduiarr: [],

      mingci: 0,
      indexs: 0,
      tableData2: [],
      zhibojian1: {
        choosezbtype: "",
        choosezbtitle: "",
        zbtitledata: []
      },
      zhibojian2: {
        choosezbtype: "",
        choosezbtitle: "",
        zbtitledata: []
      }
    };
  },
  watch: {
    // "leaveModal":{
    //   handler(newValue, oldValue) {
    //     if(!newValue){
    //       this.zblistdata = []
    //       }
    //     }
    // },
    "twinPersonModal":{
      handler(newValue, oldValue) {
        if(!newValue){
          this.zhibojian1={...this.zhibojian1,choosezbtype:'',choosezbtitle:''}
          this.zhibojian2={...this.zhibojian2,choosezbtype:'',choosezbtitle:''}}
        }
    },
    "zhibojian1.choosezbtype": {
      handler(newValue, oldValue) {
        if (newValue.value) {
          axios
            .get("/api/live-stream/titles", {
              params: {
                type: newValue.value
              }
            })
            .then(response => {
              this.zhibojian1.zbtitledata = [];

              for (let i in response.data.data) {
                this.zhibojian1.zbtitledata.push({
                  label: i,
                  value: response.data.data[i]
                });

                if (this.isreplace) {
                }
              }
            });
        }
      },
      deep: true,
      immediate: true
    },
    "zhibojian2.choosezbtype": {
      handler(newValue, oldValue) {
        if (newValue.value) {
          axios
            .get("/api/live-stream/titles", {
              params: {
                type: newValue.value
              }
            })
            .then(response => {
              this.zhibojian2.zbtitledata = [];
              for (let i in response.data.data) {
                this.zhibojian2.zbtitledata.push({
                  label: i,
                  value: response.data.data[i]
                });

                if (this.isreplace) {
                  // if (title == i) {
                  //   this.choosezbtitle = {
                  //     label: i,
                  //     value: response.data.data[i]
                  //   };
                  //   console.log(this.choosezbtitle);
                  // }
                }
              }
            });
        }
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    this.shop_id = JSON.parse(localStorage.getItem("SHOP")).shop_id;
    //主播列表
    this.zblist();
    //直播类型
    this.zbtype();
    //在播列表
    // this.getlist()
    //地址配置,用于下载模板
    if (window.location.href.indexOf("91haoka_platform") > -1) {
      console.log("线上项目，谨慎操作。");
      this.url = window.location.origin + "/91haoka_platform/";
    } else {
      this.url = "";
    }

    let p = new Promise((res, rej) => {
      axios
        .get("/api/live-stream/team/list?page=1&page_size=100")
        .then(response => {
          this.zhanduilist = response.data.data.list;
          res("ok");
        });
    });
    p.then(() => {
      //链接socket

      if (
        window.location.origin == "https://test.91haoka.cn" ||
        window.location.origin == "http://118.190.155.55" ||
        process.env.NODE_ENV == "development"
      ) {
        this.ws = new WebSocket("ws://ddwx.yunlanit.cn:8995/");
      } else {
        this.ws = new WebSocket("wss://ws.91haoka.cn:8995");
      }

      //ws://118.190.155.55:8995   测试
      //ws://gth.yunlanit.cn:8995/ 测试
      //wss://ws.91haoka.cn:8995   正式

      this.socket();
    });
  },
  beforeDestroy() {
    clearInterval(this.xunhuan);
    this.xunhuan = "";

    //完成通信后关闭WebSocket连接
    this.ws.close();
  },
  methods: {
    async xubodanHandle() {
      if (!this.streamer_id) {
        this.$message.error("请选择主播");
        return;
      }
      let xiaboData = [];
      let xuboData = [];
      this.geren.live_rooms.forEach(item => {
        if (this.live_record_ids.find(item2 => item2 == item.id)) {
          xuboData.push(item);
        } else {
          xiaboData.push(item);
        }
      });
      if (xiaboData.length > 0) {
        const res = await axios.post("/api/live-stream/streamer/end", {
          live_record_ids: xiaboData.map(item => item.id)
        });
        if (res.data.msg.code == 0) {
          this.$message({
            type: "success",
            message:
              xiaboData.map(item => item.live_title).join(",") + "下播成功!"
          });
        }
      }
      if (xuboData.length > 0) {
        const res2 = await axios.post("/api/live-stream/streamer/transfer", {
          replace_streamer_id: this.geren.streamer_id,
          titles: xuboData.map(item => item.live_title),
          streamer_id: this.streamer_id
        });
        if (res2.data.msg.code == 0) {
          this.$message({
            type: "success",
            message:
              xuboData.map(item => item.live_title).join(",") + "续播成功!"
          });
        }
      }

      let message = {
        type: "live_streamx",
        shop_id: JSON.parse(localStorage.getItem("USER")).id,
        team_id: this.zhandui
      };
      this.ws.send(JSON.stringify(message));

      //在播列表
      this.getlist();
      this.leaveModal = false;
      this.lowerModal = false;
    },
    leaveHandle() {
      if (
        this.geren.live_rooms.length > 1 &&
        this.live_record_ids.length == 0
      ) {
        this.$message.error("请选择下播直播间");
        return;
      }

      axios
        .post("/api/live-stream/streamer/end", {
          live_record_ids: this.live_record_ids
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.leaveModal = false;
            this.lowerModal = false;
            this.$message({
              type: "success",
              message: "操作成功!"
            });

            let message = {
              type: "live_streamx",
              shop_id: JSON.parse(localStorage.getItem("USER")).id,
              team_id: this.zhandui
            };
            this.ws.send(JSON.stringify(message));

            //在播列表
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    /* 切换单播 */
    switchHandle() {
      this.twinPersonModal = false;
      this.dakashow = true;
    },
    /* 切换双播 */
    changeHandle() {
      this.dakashow = false;
      this.twinPersonModal = true;
    },
    sortchange: function(column) {
      // let arr = JSON.parse(JSON.stringify(this.tableData))
      // console.log(column.order)
      // if(column.order == 'ascending'){
      //   arr.sort((a, b) => {
      //     if(column.prop == 'sales_total'){
      //       return a.sales_total - b.sales_total
      //     }
      //     if(column.prop == 'sales_hourly'){
      //       return a.sales_hourly - b.sales_hourly
      //     }
      //     if(column.prop == 'sales_real_total'){
      //       return a.sales_real_total - b.sales_real_total
      //     }
      //     if(column.prop == 'sales_traffic_total'){
      //       return a.sales_traffic_total - b.sales_traffic_total
      //     }
      //   });
      // }
      // if(column.order == 'descending'){
      //   arr.sort((a, b) => {
      //     if(column.prop == 'sales_total'){
      //       return b.sales_total - a.sales_total
      //     }
      //     if(column.prop == 'sales_hourly'){
      //       return b.sales_hourly - a.sales_hourly
      //     }
      //     if(column.prop == 'sales_real_total'){
      //       return b.sales_real_total - a.sales_real_total
      //     }
      //     if(column.prop == 'sales_traffic_total'){
      //       return b.sales_traffic_total - a.sales_traffic_total
      //     }
      //   });
      // }
      // if(column.order == null){
      // }
      // console.log(arr)
      // arr.forEach((item,index)=>{
      //   if(this.geren.id == item.id){
      //     this.mingci = index + 1
      //   }
      // })
      // this.indexs = this.indexs + 1
    },
    gettableData2: function() {
      let message = {
        type: "live_streamx",
        shop_id: JSON.parse(localStorage.getItem("USER")).id,
        team_id: this.zhandui
      };
      this.ws.send(JSON.stringify(message));

      // if (this.zhandui == 1) {
      //   this.tableData2 = arr.filter(item => {
      //     return item.team_id == 1
      //   })
      // }
      // if (this.zhandui == 2) {
      //   this.tableData2 = arr.filter(item => {
      //     return item.team_id == 2
      //   })
      // }
      // if (this.zhandui == 3) {
      //   this.tableData2 = arr.filter(item => {
      //     return item.team_id == 3
      //   })
      // }
    },
    suansuan: function() {
      var that = this;
      this.zhanduiarr = [];

      let jisuandeshuju = [];
      if (this.huafen == 1) {
        jisuandeshuju = this.jisuandeshuju;
      }
      if (this.huafen == 2) {
        jisuandeshuju = this.jisuandeshuju2;
      }

      let arr = [];

      this.zhanduilist.forEach(item2 => {
        let obj = {
          id: item2.id,
          name: item2.name,
          img: item2.team_avatar,
          value: 0
        };
        arr.push(obj);
      });
      console.log("333");
      console.log(this.jisuandeshuju);
      console.log(this.jisuandeshuju2);
      jisuandeshuju.forEach(item => {
        arr.forEach(item2 => {
          if (item.team_id == item2.id) {
            item2.value = item2.value + parseInt(item.sales_total);
          }
        });
      });

      var alin = [];
      if (arr && arr[2]) {
        this.zhandui2 = arr[2];
        alin.push(arr[2]);
      }
      if (arr && arr[1]) {
        this.zhandui1 = arr[1];
        alin.push(arr[1]);
      }
      if (arr && arr[0]) {
        this.zhandui0 = arr[0];
        alin.push(arr[0]);
      }

      console.log("arr");
      console.log(alin.sort((a, b) => b.value - a.value));
      this.zhanduiarr = alin.sort((a, b) => b.value - a.value);
    },

    socket() {
      var that = this;
      this.ws.onopen = function() {
        let message = {
          type: "live_streamx",
          shop_id: JSON.parse(localStorage.getItem("USER")).id,
          team_id: that.zhandui
        };
        that.ws.send(JSON.stringify(message));
      };

      this.ws.onmessage = function(data) {
        //列表赋值
        if (JSON.parse(data.data).type != "@heart@") {
          that.tableData = JSON.parse(data.data).list;

          that.tableData2 = JSON.parse(data.data).list;
          // console.log('222')
          console.log(JSON.parse(data.data));
          console.log(that.tableData2, "<===这边是列表的数据");
          // that.gettableData2()

          that.jisuandeshuju = JSON.parse(data.data).pk;

          that.jisuandeshuju2 = JSON.parse(data.data).live_pk;

          if (
            JSON.parse(data.data).streaming != null &&
            JSON.parse(data.data).streaming.length > 0
          ) {
            const list = data.data ? JSON.parse(data.data).streaming : {};
            console.log(
              "这边是插值语法的数据 ===>",
              JSON.parse(data.data).streaming
            );
            that.geren = Array.isArray(list) && list.length > 0 ? list[0] : {};
            console.log("that.geren", that.geren);
            that.live_record_ids = that.geren.live_rooms
              ? that.geren.live_rooms.map(item => item.id)
              : [];
            let arr = JSON.parse(JSON.stringify(that.tableData));
            console.log("tableData", that.tableData);

            // arr.sort((a, b) => {
            //   return  b.sales_hourly - a.sales_hourly
            // });
            that.geren = {
              ...that.geren,
              live_rooms: that.geren.live_rooms
                ? that.geren.live_rooms.map((item, index) => {
                    return {
                      ...item,
                      mingci: arr.findIndex(item2 => item2.id == item.id) + 1
                    };
                  })
                : []
            };
            // arr.forEach((item, index) => {
            //   if (that.geren.id == item.id) {
            //     that.mingci = index + 1;
            //   }
            // });
          } else {
            that.geren = {
              live_rooms: [
                {
                  id: "",
                  shop_id: "",
                  user_id: "",
                  team_id: "",
                  live_room: "",
                  live_platform: "",
                  live_title: "",
                  live_source: "",
                  live_status: "",
                  stream_duration: "",
                  created_at: "",
                  end_at: "",
                  updated_at: "",
                  deleted_at: "",
                  streamer_name: "",
                  team_name: "",
                  sales_total: "",
                  sales_real_total: "",
                  sales_traffic_total: "",
                  formatted_time: "",
                  sales_hourly: ""
                }
              ],
              streamer_id: "",
              streamer_name: ""
            };
            that.mingci = "--";
          }

          that.suansuan();
        }
      };
      // 监听连接关闭事件
      this.ws.onclose = function() {
        // 监听整个过程中websocket的状态
        // console.log('ws连接状态3：' + that.ws.readyState);
      };
      // 监听并处理error事件
      this.ws.onerror = function(error) {
        console.log("ws连接状态4：" + that.ws.readyState);
        console.log(error);
      };
    },
    //跳转
    tozbgl() {
      this.$router.push({
        path: "/zhibotongji9/zhuboguanli"
      });
    },
    //下载模板
    downDate: function() {
      const a = document.createElement("a");
      a.setAttribute("download", "直播统计使用说明.pdf");
      a.setAttribute("href", this.url + "static/zbdk.pdf");
      a.click();
    },
    //时间差
    timediff(begin_time) {
      var end_time = this.getNowDate();
      //年月日时分秒转换为时间戳
      let beginTime = new Date(begin_time).getTime() / 1000;
      let endTime = new Date(end_time).getTime() / 1000;
      var starttime = "";
      var endtime = "";
      if (beginTime < endTime) {
        starttime = beginTime;
        endtime = endTime;
      } else {
        starttime = endTime;
        endtime = beginTime;
      }
      //计算天数
      var timediff = endtime - starttime;
      var days = parseInt(timediff / 86400);
      //计算小时数
      var remain = timediff % 86400;
      var hours = parseInt(remain / 3600);
      //计算分钟数
      var remain = remain % 3600;
      var mins = parseInt(remain / 60);
      var res = hours + "小时" + mins + "分";
      return res;
    },
    timediff2(item) {
      // console.log(item.sales.total_order/((moment() - moment(item.created_at))/1000/60))
      // var end_time = this.getNowDate()
      // //年月日时分秒转换为时间戳
      // let beginTime = (new Date(begin_time).getTime()) / 1000;
      // let endTime = (new Date(end_time).getTime()) / 1000;
      // var starttime = ''
      // var endtime = ''
      // if (beginTime < endTime) {
      //   starttime = beginTime;
      //   endtime = endTime;
      // } else {
      //   starttime = endTime;
      //   endtime = beginTime;
      // }
      // //计算天数
      // var timediff = endtime - starttime;
      // console.log(timediff/60)
      // return timediff/60
    },
    //获取当前时间年月日时分秒
    getNowDate() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天"
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      // console.log(year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds)
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds
      );
    },
    //主播列表
    zblist() {
      axios
        .get("/api/live-stream/streamer/listx?page=1&page_size=300")
        .then(response => {
          // console.log(response.data.data)
          this.zblistdata = response.data.data.list;
        });
    },
    //直播类型
    zbtype() {
      axios.get("/api/live-stream/types").then(response => {
        // console.log(response.data.data)
        for (let i in response.data.data) {
          // console.log(i)
          this.zbtypedata.push({
            label: response.data.data[i],
            value: i
          });
        }
      });
    },
    //当前直播类型
    nowtype(val) {
      //直播标题
      this.zbtitle(val.value);
      this.choosezbtitle = "";
      this.zbtitledata = [];
    },
    //直播标题
    zbtitle(type, title) {
      axios
        .get("/api/live-stream/titles", {
          params: {
            type: type
          }
        })
        .then(response => {
          for (let i in response.data.data) {
            // console.log(response.data.data[i])
            this.zbtitledata.push({
              label: i,
              value: response.data.data[i]
            });

            if (this.isreplace) {
              if (title == i) {
                this.choosezbtitle = {
                  label: i,
                  value: response.data.data[i]
                };
                console.log(this.choosezbtitle);
              }
            }
          }
        });
    },

    //在播列表
    getlist() {
      axios.get("/api/live-stream/list").then(response => {
        // console.log(response)
        this.tableData = response.data.data;
        // if(this.tableData.length!=0){
        // 	// console.log('有值')
        // 	if(!this.xunhuan){
        // 		this.xunhuan = setInterval(()=>{
        // 			this.getlist()

        // 		},5000)
        // 	}
        // }else{
        // 	console.log('无值')
        // 	clearInterval(this.xunhuan);
        // 	this.xunhuan=''
        // }
      });
    },
    //下播
    handleEdit(type) {
      this.editType = type;
      if (this.geren.live_rooms.length > 1) {
        this.leaveModal = true;
      } else {
        this.lowerModal = true;
      }
      // this.$confirm("是否确认下播?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     axios
      //       .post("/api/live-stream/streamer/end", {
      //         live_record_id: id
      //       })
      //       .then(response => {
      //         if (response.data.msg.code == 0) {
      //           this.$message({
      //             type: "success",
      //             message: "操作成功!"
      //           });

      //           let message = {
      //             type: "live_streamx",
      //             shop_id: JSON.parse(localStorage.getItem("USER")).id,
      //             team_id: this.zhandui
      //           };
      //           this.ws.send(JSON.stringify(message));

      //           //在播列表
      //           this.getlist();
      //         } else {
      //           this.$message.error(response.data.msg.info);
      //         }
      //       });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消"
      //     });
      //   });
    },
    //打卡
    daka() {
      this.isreplace = false;
      this.dakashow = true;
      this.choosezb = "";
      this.choosezbtype = "";
      this.choosezbtitle = "";
      this.zbtitledata = [];
    },
    //替换上播
    replace(row) {
      console.log(row);
      this.replaceid = row.streamer_id;
      this.isreplace = true;
      this.dakashow = true;
      this.choosezb = "";
      this.choosezbtype = "";
      this.choosezbtitle = "";
      this.zbtitledata = [];
      //赋值直播类型
      for (var x = 0; x < this.zbtypedata.length; x++) {
        console.log(this.zbtypedata[x].label);
        if (this.zbtypedata[x].label == row.live_platform) {
          this.choosezbtype = this.zbtypedata[x];
          //直播标题
          this.zbtitle(this.zbtypedata[x].value, row.live_title);
        }
      }
    },
    //开始直播
    startzb(val) {
      if (val == 1) {
        if (this.choosezb == "") {
          this.$message.error("请选择主播");
          return;
        } else if (this.choosezbtype == "") {
          this.$message.error("请选择直播类型");
          return;
        } else if (this.choosezbtitle == "") {
          this.$message.error("请选择直播标题");
          return;
        }
      } else {
        console.log(this.zhibojian1);
        console.log(this.zhibojian2);

        if (this.choosezb == "") {
          this.$message.error("请选择主播");
          return;
        } else if (this.zhibojian1.choosezbtype == "") {
          this.$message.error("请选择直播间1类型");
          return;
        } else if (this.zhibojian1.choosezbtitle == "") {
          this.$message.error("请选择直播间1标题");
          return;
        } else if (this.zhibojian2.choosezbtype == "") {
          this.$message.error("请选择直播间2类型");
          return;
        } else if (this.zhibojian2.choosezbtitle == "") {
          this.$message.error("请选择直播间2标题");
          return;
        }
      }

      var textval = this.choosezb.name + " 是否确认开启直播";

      this.$confirm(textval, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.isreplace) {
            //替换直播
            axios
              .post("/api/live-stream/streamer/transfer", {
                replace_streamer_id: this.replaceid,
                title: this.choosezbtitle.label,
                streamer_id: this.choosezb.id
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.dakashow = false;
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });

                  let message = {
                    type: "live_streamx",
                    shop_id: JSON.parse(localStorage.getItem("USER")).id,
                    team_id: this.zhandui
                  };
                  this.ws.send(JSON.stringify(message));

                  //在播列表
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          } else {
            let live_rooms = [];
            if (val == 1) {
              live_rooms.push({
                type: this.choosezbtype.label,
                title: this.choosezbtitle.label,
                source: this.choosezbtitle.value
              });
            } else {
              live_rooms.push({
                type: this.zhibojian1.choosezbtype.label,
                title: this.zhibojian1.choosezbtitle.label,
                source: this.zhibojian1.choosezbtitle.value
              });
              live_rooms.push({
                type: this.zhibojian2.choosezbtype.label,
                title: this.zhibojian2.choosezbtitle.label,
                source: this.zhibojian2.choosezbtitle.value
              });
            }
            //新建直播
            axios
              .post("/api/live-stream/record/create", {
                streamer_id: this.choosezb.id,
                live_rooms: live_rooms
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.dakashow = false;
                  this.twinPersonModal = false;
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });
                  let message = {
                    type: "live_streamx",
                    shop_id: JSON.parse(localStorage.getItem("USER")).id,
                    team_id: this.zhandui
                  };
                  this.ws.send(JSON.stringify(message));
                  //在播列表
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
.t_border_one {
  border: 10px rgb(249, 212, 104) solid;
}
.t_border_two {
  border: 10px rgb(223, 232, 233) solid;
}
.t_border_three {
  border: 10px rgb(248, 204, 156) solid;
}
.t_zdbox {
  border-radius: 20px;
  padding: 20px 40px 20px 20px;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  margin-left: 20px;
}
.t_zdbox:first-child {
  margin-left: 0;
}
</style>
<style lang="scss" scoped>
.index {
  /deep/ .el-input__inner {
    background: #f3f5f8;
    border: 0;
  }

  .t_table_box {
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }
}
.btn_broadcast {
  display: flex;
  justify-content: space-between;
}
.live_room {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .room_one {
    color: #999;
    margin: 20px 0 10px 0;
  }
  .room_two {
    color: #999;
    margin: 20px 0 10px 0;
  }
}
.word_mark {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  align-items: center;
}
.start_live {
  width: 100%;
  height: 45px;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
}
.select_room {
  color: #666666;
  margin-top: 15px;
}
.checkbox_room {
  margin-top: 10px;
}
.leave_btn {
  width: 100%;
  height: 66px;
  cursor: pointer;
  margin-top: 40px;
}
.confim_text {
  color: #333;
  text-align: center;
  font-size: 16px;
}
.prompt_text {
  color: #ff0000;
  margin-top: 15px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #2974FF;
    border-color: #2974FF;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
    font-size: 16px;
}
/deep/ .el-dialog {
  border-radius: 20px;
}
/deep/ .el-dialog__body{
  padding: 15px 20px;
}
</style>
